<template>
  <div v-theme:column="'wide'" id="show-blogs">
      <h1>博客总览</h1>
      <input type="text" v-model="search" placeholder="请输入要搜索的内容">
      <div class="single-blog" v-for="blog in fileteredBlogs">
         <router-link :to="'/blog/'+ blog.id"> 
            <h2 v-rainbow>{{blog.title | to-uppercase}}</h2>
        </router-link>
          <article>
              {{blog.body | snippet}}
          </article>
      </div>
  </div>
</template>

<script>
export default {
    name:'ShowBlog',
    data(){
        return{
        blogs:[],
        search:""
        }
    },
    created(){
        this.$http.get('http://jsonplaceholder.typicode.com/posts')
        .then(function(data){
            console.log(data);
           this.blogs = data.body.slice(0,20);
           console.log(this.blogs);
        })
    },
    // 实现搜索功能
    computed:{
        fileteredBlogs:function(){
            return this.blogs.filter((blog) => {
                return blog.title.match(this.search);
            })
        }
    },
    //组件内 过滤器
//     filters: {
//   "to-uppercase": function (value) {
//     return value.toUpperCase();
//   }
// }

}
</script>
<style  scoped>
#show-blogs{
    max-width: 800px;
    margin: 0 auto;
}
.single-blog{
    padding: 20px;
    margin: 20px 0;
    box-sizing: border-box;
    background: #cccccc;
    border:1px dotted #aaa
}
#show-blogs a{
    color: #444;
    text-decoration: none;

}
input[type="text"]{
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
}

</style>